/**
 * TreeSelect 下拉选择框
 * add by lifenping
 * on 2020.02.26
 */
import { Form, TreeSelect } from 'antd';
import React from 'react';
const { TreeNode } = TreeSelect;

const FormItem = Form.Item;

interface OptionsProps {
  value: any;
  title: string;
  isLeaf?: boolean;
}

interface PropsType {
  type?: string;
  label: string;
  name: string;
  initialValue?: any;
  itemLayout?: {};
  rules?: object[];
  size?: string;
  placeholder?: string;
  treeData: OptionsProps[];
  getPopupContainer?: any;
  getFieldDecorator?: any;
  disabled?:any;
}

const TreeSelectItem: React.FC<PropsType> = props => {
  const {
    label,
    name,
    treeData,
    disabled,
    initialValue,
    itemLayout = {},
    rules,
    getFieldDecorator,
    getPopupContainer,
    ...othersProps
    
  } = props;

  const renderTreeNode = (data: any[]) => {
    if (!data || !data.length) {
      return [];
    }
    return data.map((item: any) => {
      const value = item.key;
      const title = item.name;
      const isLeaf = Boolean(!item.children);
      return (
        <TreeNode
          label={title}
          key={value}
          value={value}
          title={title}
          selectable={isLeaf}
          isLeaf={isLeaf}
        >
          {renderTreeNode(item.children)}
        </TreeNode>
      );
    });
  };

  console.log('treedata', treeData);

  return (
    <FormItem label={label} {...itemLayout} hasFeedback={!!rules}>
      {getFieldDecorator(name, {
        initialValue,
        rules,
      })(
        <TreeSelect {...othersProps} disabled={disabled} getPopupContainer={getPopupContainer}>
          {renderTreeNode(treeData)}
        </TreeSelect>,
      )}
    </FormItem>
  );
};
export default TreeSelectItem;
